/* components */
import NoDataViewNew from '@src/component/common/NoDataViewNew'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useStoreFetchUserList, useStoreRoles, useStoreTableSelection, useStoreUserPage } from "@src/modules/account/roleService/store/hooks"
import useLoading from '@src/modules/account/roleService/hooks/useLoading'
/* model */
import Role from '@model/entity/Role/Role'
/* scss */
import '@src/modules/account/roleService/component/RoleViewAllotRoleModal/index.scss'
/* vue */
import { ComponentInstance, ComputedRef, defineComponent, reactive, Ref, ref, toRefs } from 'vue'

type RoleViewAllotRoleFormType = {
  roleIdList: number[] | string[]
}

export type RoleViewAllotRoleModalProps = {

}

export interface RoleViewAllotRoleModalSetupState {
  currentSelectRole: ComputedRef<Role>;
  outsideShow: VoidFunction;
  outsideHide: VoidFunction;
}

export enum RoleViewAllotRoleModalEventEnum {
  Input = 'input',
  Submit = 'submit',
}

export type RoleViewAllotRoleModalEmitsOptions = {
  input: () => void;
}

export type RoleViewAllotRoleModalInstance = ComponentInstance & RoleViewAllotRoleModalSetupState
export type RoleViewAllotRoleModalVM = RoleViewAllotRoleModalSetupState & RoleViewAllotRoleModalProps & ComponentInstance

export default defineComponent({
  name: ComponentNameEnum.RoleViewAllotRoleModal,
  emits: [
    RoleViewAllotRoleModalEventEnum.Input,
    RoleViewAllotRoleModalEventEnum.Submit,
  ],
  components: {
    [NoDataViewNew.name]: NoDataViewNew
  },
  setup(props: RoleViewAllotRoleModalProps, { slots, emit }) {
    
    const { roles } = useStoreRoles()
    
    const RoleViewAllotRoleFormComponent: Ref<any> = ref(null)
    
    const visible = ref(false)
    
    const form: RoleViewAllotRoleFormType = reactive({
      roleIdList: [] as number[]
    })
    
    function onAllotRoleModalCloseHandler() {
      hide()
      resetRoleViewAllotModalFormFields()
    }
    
    function resetRoleViewAllotModalFormFields() {
      RoleViewAllotRoleFormComponent.value?.resetFields()
    }
    
    function onFormRoleIdListInputHandler(roleIdList: number[] | string[]) {
      form.roleIdList = roleIdList
    }
    
    function onFormSubmitHandler() {
      emit(RoleViewAllotRoleModalEventEnum.Submit, form.roleIdList)
    }
    
    function outsideShow() {
      visible.value = true
    }
    
    function outsideHide() {
      hide()
    }
    
    function hide() {
      visible.value = false
    }
    
    return {
      form: toRefs(form),
      visible,
      roles,
      onFormSubmitHandler,
      onAllotRoleModalCloseHandler,
      resetRoleViewAllotModalFormFields,
      onFormRoleIdListInputHandler,
      RoleViewAllotRoleFormComponent,
      outsideShow,
      outsideHide
    }
    
  },
  render() {
    
    const attrs = {
      on: {
        'update:visible': (val: boolean) => {
          this.visible = val
        }
      }
    }
    
    return (
      <div class={ComponentNameEnum.RoleViewAllotRoleModal}>
        
        <el-dialog
          title={this.$t('common.base.allotRole')}
          width="35%"
          {...attrs}
          visible={this.visible}
          close={this.onAllotRoleModalCloseHandler}
        >
          <el-form label-position="top" model={this.form} ref="RoleViewAllotRoleFormComponent">
            <el-select
              value={this.form.roleIdList.value}
              onInput={this.onFormRoleIdListInputHandler}
              placeholder={this.$t('common.placeholder.selectRole')}
              style="width:100%;"
              multiple
            >
              {this.roles.map(role => {
                return (
                  <el-option
                    label={role.name || ''}
                    value={role.id}
                    key={role.id}
                  >
                  </el-option>
                )
              })}
            </el-select>
          </el-form>
          
          <span slot="footer" class="dialog-footer">
            <el-button onClick={this.onAllotRoleModalCloseHandler}>
              {this.$t('common.base.cancel')}
            </el-button>
            
            <el-button
              type="primary"
              onClick={this.onFormSubmitHandler}
            >
              {this.$t('common.base.confirm')}
            </el-button>
          </span>
          
        </el-dialog>
      </div>
    ) as any
  }
}) as any
